<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>{$title}</title>
    <link rel="stylesheet" type="text/css" href="//cdn.bilnn.top/js/aui/aui.2.0.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.bilnn.top/js/aui/aui-slide.css"/>
    <style>
        body{

        }
        .aui-tab-item.aui-active {
            z-index: 1;
        }
    </style>
</head>
<body>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn" onclick="window.location.href='?c=game&a=duobao'">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <a class="aui-pull-right aui-btn aui-btn-outlined" aui-popup-for="top-right">
        <i class="aui-iconfont aui-icon-menu"></i>
    </a>
    <a class="aui-pull-right">
        <span id="my_money">{$user.score}</span>积分
    </a>
  
    <div class="aui-title"></div>
</header>
<div class="aui-popup aui-popup-top-right" id="top-right">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-comment aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner" onclick="load_recharge()">
                    立即充值
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle" onclick="window.location.href='?c=game&a=duobao_log'">
                    夺宝记录
                </div>
                
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-calendar aui-text-success"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle" onclick="window.location.href='?c=gift&a=my_gift&backurl='+encodeURIComponent(window.location.href)">
                    我的背包
                </div>
            </li>
        </ul>
    </div>
</div>
<div id="aui-slide" style="display: none">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node bg-dark">
            <img src="" alt=""/>
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>

<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-media-list">
        <li class="aui-list-header">
            适度游戏，切勿沉迷，礼物只用于打赏不可用于其他用途。
        </li>
        <li class="aui-list-item" style="padding-right: 0.75rem;">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <img src="/app{$duobao.gift_pic}">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title">{$duobao.name}</div>
                        <div class="aui-list-item-right" style="color: red">￥{$duobao.gift_price}元</div>
                    </div>
                    <div class="aui-list-item-text">
                        {$duobao.mark}
                    </div>
                </div>
            </div>
            <div class="aui-progress aui-progress-xs">
                    <div class="aui-progress-bar" id="asyn_progress" style="width: {$duobao.progress}%;"></div>
                </div>
            <div class="aui-info aui-margin-t-5" style="padding-top:0;color: #146d98">
                <div class="aui-info-item">
                    <i class="aui-iconfont aui-icon-date"></i><span>第<span style="color: red" id="asyn_lssue">{$duobao.lssue}</span>期</span>
                </div>
                <div class="aui-info-item">
                    <span style="margin-right: 0.5rem">共需<span style="color: red">{$duobao.need_num}</span>人次</span>
                    <span>距开奖剩余<span style="color: red" id="asyn_need">{$duobao.need}</span>人次</span>
                </div>
            </div>
            <div class="aui-media-list-item-inner" style="{if !$duobao.lastissue_num}display: none{/if}">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <img src="{$duobao.lastissue_pic}" class="aui-img-round aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-14">恭喜：{$duobao.lastissue_username}</div>
                        <div class="aui-list-item-right"><div class="aui-btn aui-btn-danger aui-btn-outlined aui-btn-sm">上期幸运号{$duobao.lastissue_num}</div></div>
                        
                    </div>
                </div>
            </div>
            <div style="text-align: right;" >
                <div class="aui-btn aui-btn-danger aui-btn-outlined aui-btn-sm" id="asyn_num_a" {if !$duobao.num_a}style="display:none"{/if}>数值A:{$duobao.num_a}</div>
                <div class="aui-bar aui-bar-btn aui-bar-btn-sm " style="vertical-align: middle;display: inline-block;width:4rem;">
                    <div class="aui-bar-btn-item" style="cursor: pointer;" onclick="btn_del()">
                        <i class="aui-iconfont aui-icon-minus"></i>
                    </div>
                    <div class="aui-bar-btn-item" style="width: 5%">
                        <input type="number" class="aui-input aui-text-center" style="color:red" id="price"  value="1" >
                    </div>
                    <div class="aui-bar-btn-item" style="cursor: pointer;" onclick="btn_add()">
                        <i class="aui-iconfont aui-icon-plus"></i>
                    </div>
                </div>
                <div class="aui-btn aui-btn-info aui-btn-outlined aui-btn-sm" onclick="buy('{$duobao.id}')" id="asyn_btn">{if $duobao.need==0}等待开奖{else}夺宝({$duobao.price}积分){/if}</div>

            </div>

            <p style="padding-top:0.5rem"></p>
        </li>
    </ul>
</div>
<div class="aui-tab" id="tab">
    <div class="aui-tab-item aui-active">参与记录</div>
    <div class="aui-tab-item">规则说明</div>
    <div class="aui-tab-item">往期回顾</div>
</div>

 <div class="aui-card-list" id="tab_1">
    <div class="aui-card-list-header">
        <div><i class="aui-iconfont aui-icon-my aui-text-danger"></i><span class="aui-text-danger"> 参与记录</span></div>
    </div>
    <div class="aui-card-list-content">
        <ul class="aui-list aui-media-list" id="user_list">
            {foreach from=$user_list item=one}
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media" style="width: 3rem;">
                        <img src="{$one.pic}" class="aui-img-round aui-list-img-sm">
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-14">{$one.username}</div>
                            <div class="aui-list-item-right">{$one.ctime}</div>
                        </div>
                        <div class="aui-list-item-text">
                            {$one.num}
                        </div>
                    </div>
                </div>
            </li>
            {/foreach}
        </ul>
    </div>
    <div class="aui-card-list-footer aui-text-center" id="loadUserList" onclick="loadUserList({$duobao.id},{$duobao.lssue})">
        查看更多
    </div>
</div>
<div class="aui-card-list" id="tab_2" style="display: none;">
    <div class="aui-card-list-header">
        <div><i class="aui-iconfont aui-icon-question aui-text-danger"></i><span class="aui-text-danger"> 规则说明</span></div>
    </div>
    <div class="aui-card-list-content">
        <div class="aui-card-list-content-padded">
            <p>一、每件商品根据价值平分成相应“等份”，每投注1次对应1个幸运码；</p><br>
            <p>二、同一件商品可以购买多次或一次购买多份；</p><br>
            <p>三、当一件商品所有“等份”全部售出后计算出“幸运码”，拥有“幸运码”者即可获得此商品；</p><br>
            <p>四、幸运码计算方式：</p><br>
                <p>&nbsp;&nbsp;1）取该商品最后购买时间前网站所有商品100条购买时间戳之和取后6位，并公布出数值A；</p><br>
                <p>&nbsp;&nbsp;2）等待取最新一期极速时时彩的开奖号码并发布出数值B（数据来源于168开奖网，https://www.1683700.com/）；</p><br>
                <p>&nbsp;&nbsp;3）(数值A+数值B)按该商品总参与人次取余数，余数加上1000001 即为"幸运码"。</p><br>
            <p>五、开奖后如中奖，对应礼物自动发送至用户背包，卡密请到投注记录中查看。</p><br>
        </div>
    </div>
</div>
 <div class="aui-card-list" id="tab_3" style="display: none;">
    <div class="aui-card-list-header">
        <div><i class="aui-iconfont aui-icon-back aui-text-danger"></i><span class="aui-text-danger"> 往期回顾</span></div>
    </div>
    <div class="aui-card-list-content">
        <ul class="aui-list aui-media-list">
            {foreach from=$previous item=one}
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media" style="width: 3rem;">
                        <img src="{$one.pic}" class="aui-img-round aui-list-img-sm">
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-14">第{$one.iid}期：{$one.username}</div>
                            <div class="aui-list-item-right">{$one.utime}</div>
                        </div>
                        <div class="aui-list-item-text">
                            幸运号{$one.num}&nbsp;&nbsp;数值A{$one.num_a}&nbsp;&nbsp;数值B{$one.num_b}
                        </div>
                    </div>
                </div>
            </li>
            {/foreach}
        </ul>
    </div>
   <!--  <div class="aui-card-list-footer aui-text-center">
        查看更多
    </div> -->
</div>
</body>
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bilnn.top/js/aui/aui-dialog.js"></script>
<script src="//cdn.bilnn.top/js/aui/aui-toast.js"></script>
<script src="//cdn.bilnn.top/js/aui/aui-slide.js"></script>
<script src="//cdn.bilnn.top/js/aui/aui-popup.js" ></script>
<script src="//cdn.bilnn.top/js/aui/aui-tab.js" ></script>
<script src="View/js/fun.js"></script>

<script>
    var mq = {$mq};
    function mqtt_callback(msg){
        if (msg.action!="duobao" || msg.text.asyn_id!='{$duobao.id}') return;
        var asyn_type = msg.text.asyn_type;
        if (asyn_type=='refresh'){
            location.reload();
            return;
        }
        var asyn_lssue = msg.text.asyn_lssue;
        var asyn_need = msg.text.asyn_need;
        var asyn_progress = msg.text.asyn_progress;
        var asyn_num_a = msg.text.asyn_num_a;
        $("#asyn_lssue").html(asyn_lssue);
        $("#asyn_need").html(asyn_need);
        $("#asyn_progress").css("width",asyn_progress+"%");
        if (asyn_num_a>0){
            $("#asyn_num_a").html("数值A:"+asyn_num_a);
            $("#asyn_num_a").show();
            $("#asyn_btn").html("等待开奖");
        }
    }
</script>
<script src="//cdn.bilnn.top/js/mqtt/mqttws31.js" type="text/javascript"></script>
<script src="//cdn.bilnn.top/js/mqtt/mqtt.js"></script>
            
<script>
    var popup = new auiPopup();
    var slide = new auiSlide({
        container:document.getElementById("aui-slide"),
        //"width":500,
        "height":240,
        "speed":500,
        "autoPlay": 3000, //自动播放
        "loop":true,
        "pageShow":true,
        "pageStyle":'dot',
        'dotPosition':'center'
    })

    var tab = new auiTab({
        element:document.getElementById("tab"),
        index:1,
        repeatClick:false
    },function(ret){
        if (ret.index==1){
            $("#tab_1").show();
            $("#tab_2").hide();
            $("#tab_3").hide();
        }
        if (ret.index==2){
            $("#tab_1").hide();
            $("#tab_2").show();
            $("#tab_3").hide();
        }
        if (ret.index==3){
            $("#tab_1").hide();
            $("#tab_2").hide();
            $("#tab_3").show();
        }
    });

    function buy(id){
        var toast = new auiToast();
        var need = parseFloat($("#asyn_need").html());
        var price = parseFloat($("#price").val());
        if(need==0){
            toast.fail({
                title:"等待开奖中",
                duration:2000
            });
        }else if (price<1 || price>need){
            toast.fail({
                title:"购买数量错误",
                duration:2000
            });
        }else{
            var back = vpost("?c=game&a=duobao_buy","price="+price+"&id="+id);
            if (back.code==0){
                price = {$duobao.price} * price;
                $("#my_money").html((parseFloat($("#my_money").html())-price));
                toast.success({
                    title:back.msg,
                    duration:2000
                });
            }else{
                toast.fail({
                    title:back.msg,
                    duration:2000
                });
            }
        }
    }

    function btn_add(){
        var need = parseFloat($("#asyn_need").html());
        if ($("#price").val()<need){
            $("#price").val(parseFloat($("#price").val())+1);
        }
    }
    function btn_del(){
        if ($("#price").val()>1){
          $("#price").val(parseFloat($("#price").val())-1);
        }
    }

    function load_recharge(){
        popup.hide();
        setTimeout(function (){
            recharge();
        },500);
    }

    function recharge() {
        var dialog = new auiDialog();
        var toast = new auiToast();
        dialog.prompt({
            title:"充值积分",
            text:'请输入积分，10积分=1元',
            intval:true,
            value:"10",
            html:'<div class="aui-content aui-margin-t-15"><input class="aui-radio" type="radio" name="pay_id" checked style="height:1.2rem;min-height:1.2rem" value="alipay"> 支付宝支付&nbsp;&nbsp;&nbsp;&nbsp;<input class="aui-radio" type="radio" name="pay_id" style="height:1.2rem;min-height:1.2rem" value="wechat"> 微信支付</div>',
            buttons:['取消','确定']
        },function(ret){
            if(ret.buttonIndex == 2){
                if (ret.text==''){
                    toast.fail({
                        title:"充值金额为空",
                        duration:2000
                    });
                }else{
                    var back = vposts("/api/v3/vas/order",JSON.stringify({ action: "score",method:$("input[name='pay_id']:checked").val(),id:1,num:parseInt(ret.text)}));
                    if (back.code==0){
                        dialog.alert({
                            title:"扫码支付",
                            msg:'支付完成后刷新页面<br><img width="128" src="https://api.pwmqr.com/qrcode/create/?url='+encodeURIComponent(back.data.qr_code)+'">',
                            buttons:['确定']
                        },function(ret){
                            window.location.reload();
                        })
                    }else{
                        toast.fail({
                        title:back.msg,
                        duration:2000
                    });
                    }
                } 
            }
        })
    }
    var page = 2;
    var lock = 0;
    function loadUserList(id,iid){
        if (lock==1) return false;
        lock = 1;
        var back = vpost("?c=game&a=duobao_userlist","id="+id+"&iid="+iid+"&page="+page);
        if(back.code==0){
            $.each(back.lists, function (n, value) {
                lists = '<li class="aui-list-item aui-list-item-middle"><div class="aui-media-list-item-inner"><div class="aui-list-item-media" style="width: 3rem;"><img src="'+value.pic+'" class="aui-img-round aui-list-img-sm"></div><div class="aui-list-item-inner"><div class="aui-list-item-text"><div class="aui-list-item-title aui-font-size-14">'+value.username+'</div><div class="aui-list-item-right">'+value.ctime+'</div></div><div class="aui-list-item-text">'+value.num+'</div></div></div></li>';
                $("#user_list").append(lists);
            });
            page++;
        }else{
            $("#loadUserList").html(back.msg);
        }
        lock = 0;
    }
</script>
</html>